/*
 * @Author: kanglang
 * @Date: 2020-08-20 14:07:42
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-08-12 18:03:57
 * @Description: 车主端首页
 */

import React from 'react';
import { SafeAreaView, StyleSheet, View, Text, Image, NativeModules } from 'react-native';
import { XMListView, XMEmpty, XMImage } from '@/common';
import { mainBgColorLightGray, isAndroid, px2dp } from '@/styles';
import { empty03, iconUploadGray, iconUploadRed } from '@/images';
import { uploadImage } from '@/config';
import baseConfig from '@/config/baseConfig';
import api from '@/api';
import { fontColorDeepGray, fontColorRed, fontColorSecDeepGray, mainBgColorWhite } from '../../../common/styles';

const { fileUrl } = baseConfig;

export default class WatermarkCameraHistoryRecords extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      historyRecords: [], // 未上传的历史记录
    };
  }

  componentDidMount() {
    this.getAllWaterLocal();
  }

  componentWillUnmount() {
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <XMListView
          ref={(ref) => {
            this.listView = ref;
          }}
          url='supply-app-api/api/v1/driverPictureInfo/pageDriverPictureInfo'
          methods='GET'
          dataPropsName='data.list'
          renderRow={(item, index) => this._renderItem(item, index)}
          renderEmpty={() => (
            <XMEmpty
              emptyImg={empty03}
              boxStyle={{ marginTop: px2dp(180) }}
              desc='暂无商品'
            />
          )}
          columnWrapperStyle={styles.bigBox}
          style={{}}
          renderHeader={() => <>{this._renderHeader()}</>}
          onRefresh={() => {
            this.getAllWaterLocal();
          }}
        />
      </SafeAreaView>
    );
  }

  //
  getAllWaterLocal =() => {
    NativeModules.DataModule.getAllWater((res) => {
      console.log('🚀🚀🚀wimi======>>>getAllWater', JSON.parse(res));
      this.setState({ historyRecords: JSON.parse(res) });
    });
  }

  _renderHeader=() => {
    const { historyRecords } = this.state;
    return historyRecords.map((item, index) => {
      return this._renderItemLocal(item, index);
    });
  }

  _renderItemLocal = (item, index) => {
    return (
      <View style={styles.itemWrap} key={index}>
        <XMImage source={{ uri: item.filePath }} style={styles.headerImg} />
        <View style={styles.itemRight}>
          <View style={styles.itemTitleWrap}>
            <Text style={styles.itemTitle}>{item.carNum || '未填写车牌'}</Text>
            <View style={styles.itemStatus}>
              <Image
                source={iconUploadRed}
                resizeMode='contain'
                style={styles.itemStatusImg}
              />
              <Text style={[styles.itemStatusText, { color: fontColorRed }]}>未上传</Text>
            </View>
          </View>
          <View style={styles.itemDescWrap}>
            <Text style={styles.itemDesc}>
              {item.address}
            </Text>
            <Text style={styles.itemTime}>{item.time}</Text>
          </View>
        </View>
      </View>
    );
  };

  _renderItem = (item, index) => {
    return (
      <View style={styles.itemWrap} key={index}>
        <XMImage
          source={{ uri: fileUrl + item.pictureId }}
          style={styles.headerImg}
          onClick={(source) => {
            console.log('🚀🚀🚀wimi======>>>', source);
          }}
        />
        <View style={styles.itemRight}>
          <View style={styles.itemTitleWrap}>
            <Text style={styles.itemTitle}>{item.carNo || '未填写车牌'}</Text>
            <View style={styles.itemStatus}>
              <Image
                source={iconUploadGray}
                resizeMode='contain'
                style={styles.itemStatusImg}
              />
              <Text style={styles.itemStatusText}>已上传</Text>
            </View>
          </View>
          <View style={styles.itemDescWrap}>
            <Text style={styles.itemDesc}>
              {item.address}
            </Text>
            <Text style={styles.itemTime}>{item.uploadTime}</Text>
          </View>
        </View>
      </View>
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: mainBgColorLightGray,
    alignItems: 'center',
  },
  itemWrap: {
    width: px2dp(702),
    height: px2dp(248),
    marginTop: px2dp(24),
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: px2dp(24),
    paddingHorizontal: px2dp(24),
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(24)
  },
  headerImg: {
    width: px2dp(200),
    height: px2dp(200),
  },
  itemRight: {
    flex: 1,
    height: px2dp(200),
    marginLeft: px2dp(24),
  },
  itemTitleWrap: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    flex: 1,
  },
  itemTitle: {
    fontSize: px2dp(32),
    fontWeight: 'bold',
  },
  itemStatusText: {
    fontSize: px2dp(24),
    color: fontColorSecDeepGray,
    marginLeft: px2dp(8)
  },
  itemStatus: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  itemStatusImg: {
    width: px2dp(28),
    height: px2dp(28),
  },
  itemDesc: {
    fontSize: px2dp(24),
    color: fontColorDeepGray,
  },
  itemTime: {
    fontSize: px2dp(24),
    color: fontColorSecDeepGray,
    marginTop: px2dp(10)
  },

});
